<template>
    <div class="portal-detail-container datas-container" v-loading="loading">
        <!--<h3 class="page-title"> 管理员管理 <small></small></h3>-->
        <div class="datas-search"><!-- padding-10 ovh-imp search-form -->
            <el-button size="mini" type="primary" class="mbtn" @click="showCreateWin()"> + 新增 </el-button>
        </div>
        <div class="m-table-container" ref="datasContainer">
            <el-table class="m-table" :height="datasTableHeight"
                :data="list"
                border
                size="mini"
                style="width: 100%">
                <el-table-column
                    prop="type"
                    label="图片">
                    <template slot-scope="scope">
                        <file-thumb theme="mini" :file="scope.row.image"></file-thumb>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="content"
                    label="佳句">
                </el-table-column>
                <el-table-column
                    prop="author"
                    label="作者">
                </el-table-column>

                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="text"
                            @click="handleView(scope.row, scope.$index)">查看</el-button>
                        <el-button
                            size="mini"
                            type="text"
                            @click="handleEdit(scope.row, scope.$index)">编辑</el-button>
                        <!--<el-button
                            size="mini"
                            type="text"
                            @click="handleDelete(scope.row, scope.$index)">删除</el-button>-->
                    </template>
                </el-table-column>
            </el-table>
            <resize-observer @notify="handleResize" />
        </div>
        <el-pagination
            @size-change="refresh"
            @current-change="refresh"
            :current-page.sync="pagination.current"
            :page-sizes="[10, 20, 50, 100]"
            :page-size.sync="pagination.pageSize"
            layout="total, sizes, prev, pager, next"
            :total="pagination.total">
        </el-pagination>

        <el-dialog :title="winName" :visible.sync="showCreate" top="60px" width="900px"
                   :close-on-click-modal="false" :append-to-body="true">
            <c-create @close="closeWin" :mod-id.sync="modId" :show.sync="showCreate" :is-view.sync="isView"></c-create>
        </el-dialog>
    </div>
</template>

<script>
    import { mapState, mapActions } from 'vuex';
    import axios from 'axios';
    import cCreate from './create';

    export default {
        data() {
            return {
                showCreate: false,
                modId: null,
                isView: false,
                formLabelWidth: '120px',
                winName: '新增',
                list: [],
                loading: false,
                datasTableHeight: 300,
                pagination: {
                    current: 1,
                    pageSize: 10,
                    total: 0
                },
            }
        },
        components: {
            cCreate
        },
        created: function () {
            // this.pid = this.$route.query.pid;
        },
        mounted: function () {
            // this.groupId = this.$route.params.groupId;
            // this.init();
            this.refresh();
        },
        watch: {
            '$route' (to, from) {
                // this.groupId = this.$route.params.groupId;
                // this.refresh();
            }
        },
        filters: {
            adminTypeLabel( type ) {
                if( type == 'SUPER') {
                    return '超级管理员';
                } else if(type == '_SUPER') {
                    return '系统管理员';
                } else {
                    return '管理员';
                }
            }
        },
        computed: {
            ...mapState([
                'loginUser'
            ])
        },
        methods: {
            handleResize() {
                if(!this.$refs.datasContainer || !this.$refs.datasContainer.getBoundingClientRect) return;

                let rect = this.$refs.datasContainer.getBoundingClientRect();
                let height = _.get(rect, 'height');

                if(height > 0) {
                    this.datasTableHeight = height;
                }
            },
            init() {
                this.$nextTick(() => {
                    this.handleResize();
                });
            },
            async refresh() {
                let data = this.$japi.quote.getQuoteList({
                    page: this.pagination.current,
                    pageSize: this.pagination.pageSize
                })

                if(data) {
                    this.pagination.total = data.count;
                    this.list = data.rows || [];
                }
            },
            closeWin(flag){
                this.showCreate = false;
                if(flag) {
                    this.refresh();
                }
            },
            showCreateWin() {
                this.showCreate = true;
                this.modId = null;
                this.isView = false;
                this.winName = '新增佳句';
            },
            handleView(it) {
                this.modId = it.id;
                this.showCreate = true;
                this.isView = true;
            },
            handleEdit(it) {
                this.modId = it.id;
                this.showCreate = true;
                this.isView = false;
            },
            async _delete(id, type) {
                let ret = await this.$japi.quote.remove(id);
                if(ret) this.refresh();
            },
            handleDelete(it) {

                if(!it || !it.id) {
                    return;
                }
                this.$confirm(`此操作将永久删除该佳句, 是否继续?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this._delete(it.id);
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>

</style>
